<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>新浪微博图床 — 何故博客</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="shortcut icon" href="icon.png" type="image/x-icon">
    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="css/sweet-alert.min.css" rel="stylesheet">
    <link type="text/css" href="source/jquery.fancybox.css" rel="stylesheet">
    <style>
    @media (min-width: 1200px) {
        .container {
            width: 1040px;
        }
    }

    a {
        color: #AFAFAF;
    }

    a:hover {
        text-decoration: none;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        transition: 0.2s;
    }

    a:focus,
    a:active {
        text-decoration: none;
        outline: 0 !important;
    }

    * {
        margin: 0;
        padding: 0;
        outline-style: none;
        box-shadow: none;
        border-color: transparent;
    }

    *:focus {
        outline: 0!important;
        -webkit-appearance: none;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
        background-color: #EDEFF0;
        background-size: cover;
    }

    .nav {
        display: block;
        background-color: #fff;
        border-radius: 5px;
        padding: 0px 20px 20px 20px;
        margin: 20px 0px;
        z-index: 100;
    }

    .box {
        background-color: #FFF;
        margin-top: 40px;
        height: 590px;
        min-width: 100%;
        padding: 10px;
        font-size: 12px;
        font-weight: 100;
        line-height: 1.48;
        color: #514F47;
        border-radius: 10px;
        box-shadow: 1px 1px 3px rgba(100, 100, 100, 0.15);
        overflow-y: auto;
    }

    /**** textarea scroll-bar ****/
    .box::-webkit-scrollbar-track-piece {
        background-color: #FFF;
    }

    .box::-webkit-scrollbar {
        width: 7px;
    }

    .box::-webkit-scrollbar-thumb {
        height: 100px;
        background-color: #CDC9C9;
        outline: transparent;
    }

    .box::-webkit-scrollbar-thumb:hover {
        background-color: #828282;
    }

    h5 {
        font-size: 15px;
        margin-left: 15px;
    }

    .page-header {
        margin: 10px 0;
        padding-top: 12px;
        padding-left: 1px;
        line-height: 0px;
        color: #989898;
    }

    .page-content {
        width: 100%;
        min-height: 135px;
        text-align: center;
        display: inline-block;
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        -webkit-transition: 0.3s;
        box-shadow: 0 14px 20px -20px #000;
    }

    .page-content:hover {
        cursor: pointer;
        background-color: #000;
        opacity: 0.6;
        box-shadow: 0 20px 20px -20px #000;
        -webkit-transform: scale(1.05);
    }

    /***footer***/
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 50px;
        font-size: 12px;
        background-color: #2C3E50;
    }

    .footer p {
        margin-top: 20px;
        color: #C5C5C5;
    }

    .footer p a {
        color: #C5C5C5;
        margin-left: 3px;
        margin-right: 3px;
    }

    .footer p a:hover {
        color: #888;
    }

    .footer .fa-heart {
        color: red;
    }

    .fa {
        color: #5C5C5C;
    }

    .imgsrc {
        padding: 8px 10px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        outline: 0;
        border-color: rgba(60, 60, 60, 0.6);
        border-width: 2px;
        border-radius: 5px;
        text-align: left;
        font-size: 12px;
        font-weight: bold;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #7D7D7D;
        z-index: 9999;
    }

    .imgsrc:focus {
        color: #000;
    }

    /*tips*/
    #tips_wrap {
        background: url(../source/border.png) 8px 0 repeat;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        color: #555;
        text-shadow: none;
        margin: 30px 0 50px 0;
        min-height: 245px;
    }

    .tips {
        color: #999;
        padding: 20px 50px;
        background: #fff;
        font-size: 11px;
        line-height: 22px;
    }

    .tips a {
        color: #969696;
        padding: 2px 4px;
        -webkit-transition: 0.3s;
        border-radius: 3px;
        background-color: rgba(180, 208, 236, 0.2);
    }

    .tips a:hover {
        color: #000;
        background-color: rgba(180, 208, 236, 0.5);
    }

    label.defaultIcon,
    label.customIcon {
        padding-left: 5px;
        display: inline-block;
        margin-top: 2px;
    }

    #syscBtn {
        margin: 10px;
    }

    span.donate {
        color: #666;
        cursor: pointer;
        margin: 0 3px;
        padding: 2px 4px;
        -webkit-transition: 0.3s;
        border-radius: 3px;
        background-color: rgba(238, 9, 22, 0.1);
    }

    .donate:hover {
        color: #000;
        background-color: rgba(180, 208, 236, 0.95);
    }

    /* 單選框 */
    .css3Label {
        list-style: none;
        display: inline-block;
    }

    .css3Label label {
        cursor: pointer;
        display: block;
        width: 140px;
        position: relative;
    }

    .css3Label label::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        line-height: 12px;
        border-radius: 50%;
        margin-top: 4px;
        color: #FFF;
        background: #BEBEBE;
        position: absolute;
        left: -17;
    }

    .css3Label input[type="checkbox"] {
        display: none;
    }

    .css3Label input[type="checkbox"]:checked + label::before {
        content: "";
        background: #000;
        -webkit-transition: all 0.6s;
    }

    #custom-icon-preview {
        height: 45px;
        width: 45px;
        border: 1px solid #efefef;
        padding: 10px;
        border-radius: 5px;
        opacity: 0.9;
    }

    /*Animate*/
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }
    /*blinking*/

    @-webkit-keyframes twinkling {
        0% {
            background-color: rgba(238, 9, 22, 0.1);
            opacity: 1;
        }
        50% {
            background-color: rgba(238, 9, 22, 0.5);
            opacity: 0.9;
        }
        100% {
            background-color: rgba(238, 9, 22, 0.1);
            opacity: 1;
        }
    }

    .blinking {
        cursor: not-allowed;
        -webkit-animation: twinkling 1.2s infinite ease-in-out;
        -moz-animation: twinkling 1.2s infinite ease-in-out;
        animation: twinkling 1.2s infinite ease-in-out;
        -webkit-transition: all 0.6s;
    }
    </style>
</head>

<body>
    <button type="button" class="close" title="关闭" style="margin:20px;">×</button>
    <div class="container">
        <div class="row">
            <div id="tips_wrap">
                <div class="col-xs-12 tips">
                    <div class="checkbox css3Label" style="padding-left:15px;">
						<ul>
							<li><a href="http://www.htm5.cn/" target="_blank">新浪微博图床-何故博客</a></li>
						</ul>
                        <div class="col-xs-8">
                            <input type="checkbox" id="defaultIcon">
                            <label for="defaultIcon" class="defaultIcon">使用默认图标</label>
                            <input type="checkbox" id="customIcon">
                            <label for="customIcon" class="customIcon">使用自定义图标</label>
                            <input type="file" id="custom-icon-file" style="display:none;">
                        </div>
                        <div class="col-xs-4">
                            <img id="custom-icon-preview">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box"></div>
        </div>
    </div>
    <script id="image-item-template" type="template">
        <div class="col-md-2 animated fadeInUp">
            <div class="page-header">{{date}}</div>
            <div class="page-content fancybox" d="{{d}}" data-fancybox-group="gallery" rel="gallery" href="{{imgsrc}}" title="<input type='text' class='form-control imgsrc' value='{{imgsrc}}'>" style="background-image:url('{{imgsrcthumb}}')"></div>
        </div>
    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/sweet-alert.min.js"></script>
    <script src="source/jquery.fancybox.pack.js"></script>
    <script src="js/option.js"></script>
</body>

</html>
